<template>
        <el-dialog  :title="rowType==0?'添加':'编辑'" :visible.sync="dialogVisible" width="25%" :before-close="handleClose">
                <el-form :model="dialogForm" :rules="rules" ref="ruleForm" label-width="100px">

                <el-form-item label="地区:" prop="position">
                <el-select v-model="dialogForm.position" placeholder="请选择所在地区">
                    <el-option label="华中" value="华中"></el-option>
                    <el-option label="东北" value="东北"></el-option>
                    <el-option label="华南" value="华南"></el-option>
                    <el-option label="华北" value="华北"></el-option>
                    <el-option label="西北" value="西北"></el-option>
                    <el-option label="西南" value="西南"></el-option>
                </el-select>
                </el-form-item>

                <el-form-item label="地址:" prop="address">
                    <el-cascader v-model="dialogForm.address" :options="options"></el-cascader>
                </el-form-item>

                <el-form-item label="预约电话:" prop="phone1">
                <el-input v-model.number="dialogForm.phone1"></el-input>
                </el-form-item>

                <el-form-item label="资讯电话:" prop="phone2">
                <el-input v-model.number="dialogForm.phone2"></el-input>
                </el-form-item>

                <el-form-item label="公交:" prop="bus">
                <el-input v-model="dialogForm.bus"></el-input>
                </el-form-item>


                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="closeAlert">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </span>

        </el-dialog>
        
</template>

<script>
import area from '../../../assets/area.json'
import {addArr,upDateArr} from '../../../api/hosp'
export default {
    props:['rowType','rowArr'],
    data () {
        return {
            options:[],
            dialogVisible:true,
            dialogForm:{
                id:'',
                position:'',
                address:'',
                phone1: '',
                phone2: '',
                bus:'',
                },
                rules:{
                position:[
                    {required:true,message:'请选择地区',trigger:'change'}
                ],
                address:[
                    {required:true,message:'请输入地址',trigger:'change'}
                ],
                phone1:[
                    {required:true,message:'请输入预约电话',trigger:'blur'}
                ],
                phone2:[
                    {required:true,message:'请输入咨询电话',trigger:'blur'}
                ],
                bus:[
                    {required:true,message:'请输入交通线路',trigger:'blur'}
                ]
            }
        }
    },
    methods: {
        closeAlert(){
            this.$emit('closeAlert')
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
            .then(_ => {
                done();
                this.$emit('closeAlert')
            })
            .catch(_ => {});
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.dialogForm.address=this.getAddress(this.dialogForm.address,area)
                    console.log(this.rowType)
                    if(this.rowType==0){
                        addArr(this.dialogForm).then(res=>{
                        if(res.code==200){
                            this.$emit('resetTable')
                            this.$emit('closeAlert')
                        }
                    }) 
                    }
                    if(this.rowType==1){
                        upDateArr(this.dialogForm).then(res=>{
                            if(res.code==200){
                                this.$emit('resetTable')
                                this.$emit('closeAlert')
                            }
                        })
                    }
                    
                }else{
                    return false;
                }
            });
        },
        getAddress(address,area){
            return address.map(val=>{
                for(var item of area){
                    if(item.value==val){
                        area= item.children
                        return item.label    
                    }
                }
            })
        }
    },
    created () {
        this.options = area
    },
    mounted () {
        this.dialogForm = {...this.rowArr}
    }
}
</script>

<style scoped lang="less">
    /deep/.el-dialog__header{
        height: 70px;
        font-size: 30px;
        font-weight: 800;
    }
    /deep/.el-dialog {
        height: 600px;
    }
    /deep/.el-input__inner{
        width: 340px;
    }
</style>